<@override name="title">分类管理</@override>

<@override name="content">
<div class="content">
    <input type="button" class="btn btn-default" value="添加分类" onclick="toEdit()" style="margin: 15px;">
    <div class="container-fluid pt-10">
        <div class="panel panel-5">
            <a class="block-heading">一级分类</a>

            <div class="block-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>编码</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <#if map??>
                        <#list map?keys as key>
                        <tr id="move-tr-${map[key].id}" class="tr-bg-gray" code="${map[key].code}">
                            <td>${map[key].name}</td>
                            <td>${map[key].code}</td>
                            <td>
                                <a class="link-a" href="javascript:void(0)" onclick="toEdit('${map[key].id}')">修改</a>
                                <a class="link-a" href="javascript:void(0)" onclick="toDelete('${map[key].id}')">删除</a>
                                <a class="link-a" href="javascript:void(0)" onclick="toSort('${map[key].id}', 0)">上移</a>
                                <a class="link-a" href="javascript:void(0)" onclick="toSort('${map[key].id}', 1)">下移</a>
                            </td>
                        </tr>
                        </#list>
                        </#if>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel panel-5">
            <a class="block-heading">二级分类</a>

            <div class="block-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>编码</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="subClassify">
                        <#if map??>
                        <#list map?keys as key>
                        <#list map[key].subClassifyList as item>
                        <tr id="move-tr-${item.id}" parentCode="${item.parentCode}">
                            <td>${item.name}</td>
                            <td>${item.code}</td>
                            <td>
                                <a class="link-a" href="javascript:void(0)" onclick="toEdit('${item.id}')">修改</a>
                                <a class="link-a" href="javascript:void(0)" onclick="toDelete('${item.id}')">删除</a>
                                <a class="link-a" href="javascript:void(0)" onclick="toSort('${item.id}', 0)">上移</a>
                                <a class="link-a" href="javascript:void(0)" onclick="toSort('${item.id}', 1)">下移</a>
                            </td>
                        </tr>
                        </#list>
                        </#list>
                        </#if>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--分类弹窗-->
<div class="modal" id="classifyModal" role="dialog" data-backdrop="static">
    <div class="modal_wapper">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加或修改分类信息</h4>
                </div>

                <div class="modal-body">
                    <form id="classifyForm" role="form" action="${base}/mergeClassify" method="POST">
                        <input type="hidden" name="id">
                        <div class="form-group clearfix">
                            <label class="control-label">上级分类</label>
                            <div class="col-md-8">
                                <select class="form-control" name="parentCode" id="parentCode">
                                    <option value="0">全部分类</option>
                                    <#if map??>
                                    <#list map?keys as key>
                                    <option value="${map[key].code}">${map[key].name}</option>
                                    </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label">名称</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="name">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label">编码</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" disabled name="code">
                            </div>
                        </div>
                    </form>
                    <div id="_osAlertTip" class="alert alert-success" style="display: none"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="doSave()">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--分类弹窗-->

<script type="text/javascript">
    //onReady()
    //根据一级分类筛选二级分类
    $(function(){
        $('.tr-bg-gray').click(function(){
            $('.tr-bg-gray').each(function(i,item){
                $(item).removeClass('tr-bg-gray-hover')
            })
            $(this).addClass('tr-bg-gray-hover');

            let code = $(this).attr('code');
            $('#subClassify').find('tr').each(function(i, item){
                let pcode = $(item).attr('parentCode');
                if(code == pcode){
                    $(item).show();
                }else{
                    $(item).hide();
                }
            });
        })
    });

    //添加或修改分类
    function toEdit(id) {
        if(id == undefined){
            Modal.show('classifyModal')
        }else{
            $.ajax({
                url:'${base}/getClassify',
                type:'post',
                dataType:'json',
                data:{"id":id},
                success: function(resp){
                    if(resp.errcode == 0){
                        Modal.show('classifyModal');
                        //顺序不能换
                        $('#classifyForm').fill(resp.data);
                    }else{
                        //获取失败
                    }
                }
            })
        }
    }

    //保存分类信息
    function doSave() {
        $('#classifyForm').ajaxSubmit({
            success: function (resp) {
                resp = $.parseJSON(resp);
                if(resp.errcode == 0){
                    $('#classifyModal').modal('hide');
                    window.location.reload();
                }else{
                    Modal.tipFailure("保存失败");
                }
            }
        })
    }

    //删除分类
    function toDelete(id) {
        Modal.confirm("确定删除？",function(type){
            $.ajax({
                url:'${base}/deleteClassify',
                type:'POST',
                // dataType:'json', //如果加了dataType，不需要使用 $.parseJSON(resp)
                data:{"id":id},
                success: function(resp){
                    resp = $.parseJSON(resp);
                    if(resp.errcode == 0){
                        window.location.reload();
                    }else{
                        Modal.alert(resp.message);
                    }
                }
            })
        });
    }

    //移动排序
    function toSort(id, sortType) {
        $.ajax({
            url:'${base}/sortClassify',
            type:'POST',
            dataType:'json',
            data:{'id':id, 'sortType':sortType},
            success: function(resp){
                if(resp.errcode == 0){
                    //实现两个tr的互换
                    if(sortType == 1){//下移
                        let curTr = $('#move-tr-'+id);
                        let nextTr = $('#move-tr-'+id).next();
                        curTr.insertAfter(nextTr);
                    }else{
                        let curTr = $('#move-tr-'+id);
                        let preTr = $('#move-tr-'+id).prev();
                        curTr.insertBefore(preTr);
                    }
                }else{
                    Modal.alert(resp.message);
                }
            }
        })
    }

</script>

</@override>

<@extends name="_manage_base.html" />